<template>
  <div class="page">
    <van-nav-bar
        title="通知公告"
        left-text="返回"
        left-arrow
        @click-left="handleBack"
    />
    <div class="content">
      <h1 class="title">关于2024年暑假期间后勤服务保障工作安排的通知</h1>
      <p class="date">2024年07月11日 (浏览量：613)</p>
      <p class="content-text">
        根据学校《关于2024年暑假放假及相关工作安排的通知》要求，为统筹做好暑假期间的后勤服务保障工作，更好地服务全校师生，后勤服务中心制定暑假期间有关工作方案，现将暑期后勤保障相关工作安排通知如下:
      </p>
      <h2 class="subtitle">一、暑假期间综合服务部工作安排</h2>
      <p class="content-text">
        综合服务部暑假期间值班时间为工作日上午9:00-11:30，下午15:00-17:00，值班电话：0773-5898173。
      </p>
      <h2 class="subtitle">二、暑假期间饮食服务部工作安排</h2>
      <img src="@/assets/通知1.png" alt="通知1" class="announcement-image" />
      <img src="@/assets/通知2.png" alt="通知2" class="announcement-image" />
      <h2 class="subtitle">三、暑假期间车辆运输安排</h2>
      <img src="@/assets/通知3.png" alt="通知3" class="announcement-image" />
      <p class="content-text">
        备注：暑假期间用车需求请与后勤服务中心综合服务部联系，值班电话：0773-5898173。
      </p>
      <h2 class="subtitle">四、暑假期间学生公寓管理部工作安排</h2>
      <img src="@/assets/通知4.png" alt="通知4" class="announcement-image" />
      <h2 class="subtitle">五、暑假期间物业管理部工作安排</h2>
      <p class="content-text">
        做好两校区公共区域卫生清洁及校园绿化美化工作。
      </p>
      <p class="content-text" style="text-align: right;">
        后勤服务中心<br />2024年7月12日
      </p>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

const handleBack = () => {
  router.back();
};
</script>

<style scoped>
.page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f7f8fa;
}

.content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 10px;
}

.date {
  font-size: 14px;
  color: #888;
  text-align: center;
  margin-bottom: 20px;
}

.subtitle {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-top: 20px;
  margin-bottom: 10px;
}

.content-text {
  font-size: 16px;
  color: #333;
  margin-bottom: 10px;
  line-height: 1.6;
}

.announcement-image {
  width: 100%;
  margin-bottom: 20px;
}
</style>
